<template>
  <div>

    <p>1. 获取原生DOM元素</p>
    <h1 id="h" ref="myH">我是一个孤独可怜又能吃的h1</h1>

    <p>2. 获取原生DOM元素</p>

    <Demo ref="demo"></Demo>


    <p ref="myP">{{ count }}</p>
    <button @click="btn">点击count+1, 马上提取p标签内容</button>


    <p>目标: 点击搜索按钮, 弹出聚焦的输入框, 按钮消失</p>

    <div>
      <input ref="myInp" type="text" placeholder="这是一个输入框" v-if="isShow">
      <button v-else @click="btn2">点击我进行搜索</button>
    </div>

  </div>
</template>

<script>




import Demo from './Demo.vue'

export default {

  mounted() {
    // 1. 获取组件对象
    const h = this.$refs.myH
    console.log(h)
    // 2. 获取原生DOM元素
    const h1 = document.getElementById('h')
    console.log(h1)

    // 3. 获取组件对象
    let de = this.$refs.demo
    de.demoMethod()
  },
  methods: {
    btn() {
      this.count++; // vue监测数据更新, 开启一个DOM更新队列(异步任务)
      console.log(this.$refs.myP.innerHTML)
      // 原因: Vue更新DOM异步
      // 解决: this.$nextTick()
      // 过程: DOM更新完会挨个触发$nextTick里的函数体
      this.$nextTick(() => {
        console.log(this.$refs.myP.innerHTML)
      })
    },
    async btn2() {
      this.isShow = true
      // this.$nextTick(() => {
      //   this.$refs.myInp.focus()
      // })  
      await this.$nextTick();
      this.$refs.myInp.focus()
    }
  },
  components: {
    Demo
  },
  data() {
    return {
      count: 0,
      isShow : false,
    }
  },


}
</script>

<style scoped></style>
